<template>
  <van-popup
    class="specs-popup"
    v-model="show"
    @close="closePop"
    position="bottom"
  >
    <div class="header">
      <img class="mini-img" :src="img" :alt="goodsName" />
      <span class="price" v-show="getPrice" v-html="getPrice"> </span>
    </div>
    <p>选择规格：({{ specs.length }})</p>
    <div class="specs-list">
      <div
        :class="[
          'specs-item',
          item.spec_id === spec_id && 'active',
          item.stock === 0 && 'disable'
        ]"
        v-for="item in specs"
        :key="item.spec_id"
        @click="choose(item)"
      >
        {{ item.spec_name }}
        <small v-if="item.stock === 0">(暂无库存)</small>
      </div>
    </div>

    <van-cell title="数量" class="num">
      <template #default>
        <van-stepper v-model="num" :min="1" :max="getMaxNum" />
      </template>
    </van-cell>
    <van-goods-action class="action">
      <van-goods-action-button
        type="warning"
        @click="onClickButton('cart')"
        text="加入购物车"
        :class="type !== 'all' && 'allborder'"
        v-if="type === 'all' || type === 'cart'"
      />
      <van-goods-action-button
        type="danger"
        @click="onClickButton('order')"
        text="立即购买"
        :class="type !== 'all' && 'allborder'"
        v-if="type === 'all' || type === 'buy'"
      />
      <van-goods-action-button
        type="danger"
        @click="onClickButton('update')"
        text="确定"
        :class="type !== 'all' && 'allborder'"
        v-if="type === 'update'"
      />
    </van-goods-action>
  </van-popup>
</template>
<script>
export default {
  data() {
    return { spec_id: null, show: this.value, num: 1 };
  },
  props: {
    specs: {
      // 规格
      type: Array,
      default: () => []
    },
    value: {
      // 是否显示规格弹窗
      type: Boolean,
      default: false
    },
    img: {
      // 图片
      type: String,
      default: ""
    },
    goodsName: {
      // 名称
      type: String,
      default: ""
    },
    type: {
      // 如何显示 buy all cart update
      type: String,
      default: "all"
    }
  },
  computed: {
    getPrice() {
      if (!this.currentSpec) {
        return "";
      }
      if (this.currentSpec.discounted_price) {
        return `￥<strong><del>${this.currentSpec.sell_price}</del> 折扣价：${this.currentSpec.discounted_price}</strong>`;
      }
      return `￥<strong>${this.currentSpec.sell_price}</strong>`;
    },
    getMaxNum() {
      if (!this.currentSpec) {
        return 1;
      }
      return this.currentSpec.stock;
    },
    currentSpec() {
      if (!this.spec_id) {
        return null;
      }
      return this.specs.find(s => s.spec_id === this.spec_id);
    }
  },
  methods: {
    choose({ spec_id, stock }) {
      if (stock <= 0) {
        return this.$toast({ message: "当前规格暂无库存" });
      }
      if (this.spec_id === spec_id) {
        this.spec_id = null;
        return;
      }
      this.spec_id = spec_id;
    },
    onClickButton(type) {
      if (!this.currentSpec) {
        return this.$toast({ message: "请选择规格", type: "fail" });
      }
      const typeFnKey = {
        cart: "goCart",
        order: "goOrder",
        update: "updateSpecs"
      };
      const fn = this[typeFnKey[type]];
      fn({ ...this.currentSpec, num: this.num });
    },
    goCart(params) {
      this.$apiAddCart(params).then(res => {
        const { status, msg } = res;
        if (status === 0) {
          this.$toast({ message: msg, type: "success" });
          this.$emit("input", false);
        }
      });
    },
    goOrder(params) {
      this.$emit("goOrder", params);
    },
    updateSpecs(params) {
      this.$emit("updateGoodsSpecs", params);
    },
    closePop() {
      this.$emit("input", false);
      this.num = 1;
      this.spec_id = null;
    }
  },
  watch: {
    value(val) {
      this.show = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.specs-popup {
  font-size: 16px;
  padding: 10px;
  box-sizing: border-box;
  .mini-img {
    width: 80px;
    height: auto;
  }
  .header {
    display: flex;
    align-items: flex-start;
  }
  .price {
    padding: 10px 0 0 10px;
    color: red;

    strong {
      font-size: 18px;
    }
  }
  .specs-list {
    max-height: 5rem;
    overflow-y: auto;
  }
  .specs-item {
    padding: 8px 10px;
    border-radius: 888px;
    font-size: 12px;
    margin-bottom: 10px;
    background: #f1f1f1;
    border: 1px solid #f1f1f1;
    &.active {
      border-color: #ff0000;
    }
    small {
      color: #a7a7a7;
    }
  }
  .action {
    position: static;
    button {
      &.allborder {
        border-radius: 999px;
      }
    }
  }
  .num {
    padding: 10px 5px;
    &::after {
      border: 0;
    }
  }
}
</style>
